<!--
day-fault
当日故障（驾驶舱部分）
-->
<template>
    <div class="day-fault">
        <div class="fault-label fault-label1">故障总数</div>
        <div class="fault-label fault-label2">处理中</div>
        <div class="fault-label fault-label3">已销记</div>
        <div class="fault-label fault-label4">未销记</div>
        <div class="day-fault-border"></div>
        <!-- 故障总数 -->
        <div class="fault-num fault-num1">{{ faultNum1 }}</div>
        <!-- 处理中 -->
        <div class="fault-num fault-num2">{{ faultNum2 }}</div>
        <!-- 已销记 -->
        <div class="fault-num fault-num3">{{ faultNum3 }}</div>
        <!-- 未销记 -->
        <div class="fault-num fault-num4">{{ faultNum4 }}</div>
    </div>
</template>

<script>
import {
    getDayFault, // 获取当日故障（驾驶舱部分）接口
} from '@/apis';

export default {
    name: 'day-fault',
    data() {
        return {
            faultNum1: 0, // 故障总数
            faultNum2: 0, // 处理中
            faultNum3: 0, // 已销记
            faultNum4: 0, // 未销记
        };
    },
    methods: {
        // 获取当日故障（驾驶舱部分）
        getDayFaultDatas() {
            getDayFault().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    // this.taskListCon = data;
                    const {
                        total,
                        processing,
                        xj,
                        notXj,
                    } = data;
                    this.faultNum1 = total;
                    this.faultNum2 = processing;
                    this.faultNum3 = xj;
                    this.faultNum4 = notXj;
                }
            }).catch((err) => {
                window.console.log('获取当日故障（驾驶舱部分）', err);
            });
        },
    },
    created() {
        this.getDayFaultDatas();
    },
};
</script>
<style lang='scss'>
.day-fault {
    position: absolute;
    // width: 7.78rem;
    // width: 100%;
    // height: 4rem;
    // height: 100%;
    // top: 1rem;
    // left: .1rem;
    // transform: rotateY(-6deg);
    width: 100%;
    height: 111%;
    top: 30%;
    left: 0;
    transform: rotateZ(357deg);

    .fault-label {
        font-size: .3889rem /* 14/80 */;
        color: #fff;
        letter-spacing: 0;
        font-weight: 400;
        position: absolute;
    }

    .fault-label1 {
        // top: .889rem;
        // left: .44rem;
        top: 20%;
        left: 3%;
        transform: rotateY(-8deg);
    }

    .fault-label2 {
        top: 21%;
        right: 30%;
        transform: rotateY(-4deg);
    }

    .fault-label3 {
        bottom: 20%;
        left: 3%;
        transform: rotateY(-8deg);
    }

    .fault-label4 {
        bottom: 21%;
        right:30%;
        transform: rotateY(-4deg);
    }

    .fault-num {
        font-size: .5rem /* 18/80 */;
        font-weight: bold;
        background-image: linear-gradient(179deg, #FFE43E 0%, #FFC960 85%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        position: absolute;
    }

    .fault-num1 {
        top: 19%;
        left: 34%;
        transform: rotateY(-8deg);
    }

    .fault-num2 {
        top: 20%;
        right: 15%;
        transform: rotateY(-4deg);
    }

    .fault-num3 {
        bottom: 19%;
        left: 34%;
        transform: rotateY(-8deg);
    }

    .fault-num4 {
        bottom: 20%;
        right: 15%;
        transform: rotateY(-4deg);
    }

    .day-fault-border {
        width: 1px;
        height: 80%;
        background: #0980D3;
        position: absolute;
        right: .15rem;
        top: .5rem;
        transform: rotateY(-8deg);
    }
}

</style>
